<template>
    <div class="personnel">
        <div class="module-title1">
            <div class="module-title_text">人员出入</div>
        </div>
        <div class="personnel-module module-container">
            <div class="personnel-module_table">
                <div class="personnel-module_table__title">
                    <span style="width: 14%;">#</span>
                    <span style="width: 26%">班级</span>
                    <span style="width: 26%">姓名</span>
                    <span style="width: 26%">时间</span>
                    <span style="width: 14%">状态</span>
                </div>
                <div class="personnel-module_table__content">
                    <vue-seamless-scroll :data="dataList" :class-option="optionHover" class="table-content_scroll">
                        <div class="table-content_scroll__list" :style="{background: index % 2 == 0 ? '#12242E' : 'rgba(139, 230, 225, 0.08)'}" v-for="(item, index) in dataList" :key="index">
                            <span style="width: 14%;">{{index + 1}}</span>
                            <span style="width: 26%">{{item.leader}}</span>
                            <span style="width: 26%">{{item.userName}}</span>
                            <span style="width: 26%">{{item.inOutTime}}</span>
                            <span style="width: 14%">{{item.inOutType == 0 ? '入' : '出'}}</span>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPunchQuery } from '@/api/index.js'
export default {
    data() {
        return {
            dataList: []
        }
    },
    computed: {
        optionHover() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: this.dataList.length, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    methods: {
        _getPunchQuery() {
            const startTime = this.$moment().format('YYYY-MM-DD')
            const endTime = this.$moment().add(1, 'd').format('YYYY-MM-DD')
            const params = {
                startTime,
                endTime,
            }
            getPunchQuery(params).then((res) => {
                if (res.data) {
                    this.dataList = res.data
                }
            })
        }
    },
    created() {
        this._getPunchQuery()
    }
}
</script>

<style lang="less" scoped>
.personnel {
    margin-top: 19px;
    .personnel-module {
        width: 427px;
        height: 250px;
        margin-top: 6px;
        .personnel-module_table {
            margin: 7px 11px 17px 10px;
            .personnel-module_table__title {
                display: flex;
                line-height: 46px;
                font-weight: 400;
                font-size: 14px;
                color: #8BE6E1;
                span {
                    text-align: center;
                }
            }
            .personnel-module_table__content {
                .table-content_scroll {
                    height: 180px;
                    overflow: hidden;
                    .table-content_scroll__list {
                        width: 406px;
                        line-height: 36px;
                        display: flex;
                        border-radius: 0px 0px 0px 0px;
                        font-size: 14px;
                        color: #FFFFFF;
                        span {
                            text-align: center;
                        }
                    }
                }
                
            }
        }
    }
}

</style>